<template>
  <div>
    <div>

      <img :src="imgPath" :style="imgCss" alt="">

    </div>
    用户名：<input type="text" v-model="userObj.userName"/>{{userName}}<br>
    密码：<input type="password" v-model="userObj.pwd"/>{{pwd}}<br>
    <input type="button" value="登录" @click="land()"/><br>
    <input type="button" value="确定" @click="ok()"/><br>
    <input type="button" value="改变样式" @click="change()"/>
    <hr/>
    单价：{{price}}<br>
    数量：<input type="text" v-model = "num"><br>
    总价：{{price * num}}
    <hr>
    {{age>=18 ? "成年" : "小孩"}}
    <hr>
    性别：<input type="radio" value="男" v-model="sex">男
    <input type="radio" value="女" v-model="sex">女<br>
    {{sex}}
    <hr>
    下拉框：<br>
    <select v-model="edu">
      <option value="gz">高中</option>
      <option value="dz">大专</option>
      <option value="bk">本科</option>
    </select><br>
    {{edu}}
    <input type="button"  @click="changeItem()" value="改变选项">
    <hr>
    复选框：<br>
    <input type="checkbox" value="体育" v-model="likeArray">体育
    <input type="checkbox" value="音乐" v-model="likeArray">音乐
    <input type="checkbox" value="美术" v-model="likeArray">美术
    <input type="checkbox" value="上网" v-model="likeArray">上网
    <input type="checkbox" value="游戏" v-model="likeArray">游戏<br>
    {{likeArray}}

    <hr>
    工资：<input type="text" ref="money"><br>
    <input type="button" value="获取值" @click="showValue()"><br>

    <hr>
    成绩：{{grade}}<br>
    是否合格：<span v-if="grade>=60">合格</span>
    <span v-else>不合格</span><br>
    等级:<span v-if="grade>=90">优秀</span>
    <span v-else-if="grade>=80">良</span>
    <span v-else-if="grade>=60">中</span>
    <span v-else>差</span>


    <hr>
    <table border="1" cellspacing="0" width="80%">
      <thead>
      <tr><th>序号</th><th>编号</th><th>姓名</th><th>工资</th><th>状态</th><th>操作</th></tr>
      </thead>

      <tbody>
      <tr v-for="(em,index) in emList" :key="em.id">
        <td>{{index}}</td>
        <td>{{em.id}}</td>
        <td>{{em.name}}</td>
        <td>{{em.money}}</td>
        <td>{{em.status}}</td>
        <td><input type="button" v-if="em.status === '在职'" value="离职"></td>
      </tr>
      </tbody>
    </table>


  </div>
</template>

<script>
export default {
  data(){//存放数据
    return {
      // userName:"",
      // pwd:""
      userObj: {},
      imgCss: {width: '300px', height: '300px', border:"3px solid red"},
      imgPath:require("./img/1.jpg"),
      price:30,
      num:1,
      age:11,
      sex:"男",
      edu:"",
      likeArray:[],
      grade:80,
      emList:[
        {id:1,name:"张三",money:2000,status:"在职"},
        {id:2,name:"刘勇",money:3000,status:"在职"},
        {id:3,name:"何红",money:4000,status:"离职"},
        {id:4,name:"周大",money:5000,status:"在职"},
      ]
    }
  },

  methods:{
    land(){
      //得到用户名和密码，注意必须用this方法
      // alert(this.userName+"  "+this.pwd)

      // alert("登录")

      alert(JSON.stringify(this.userObj))
      if (this.userObj.userName === "java" && this.userObj.pwd === "123"){
        alert("登录成功")
        //清空文本框内容
        // this.userObj.userName = "";
        // this.userObj.pwd ="";

        //经路由跳转主页
    // this.$router.push("/index")

        //经路由跳转主页,并传递参数
        //name:注册的路由名称
        //params：描述传递参数
        this.$router.push({name:"Index",params:{id:2,name:"tom"}});


        // this.userObj = {};
      }
      else {
        alert("登录失败")
      }
    },
    ok(){
      alert("确定")
    },
    change(){
      this.imgCss.width = "100px";
      this.imgCss.height = "100px"
    },
    changeItem(){
      this.edu="bk"
    },
    showValue(){
      alert(this.$refs.money.value);
      this.$refs.money.style.color = "red";
    }
  },


  name: "login"
}
</script>

<style scoped>

</style>